<template>
  <div class="custom-menu">
    <div class="menu-list">
      <div
        v-for="item in menuItems"
        :key="item.key"
        class="menu-item"
        :class="{ 'has-submenu': item.children && item.children.length > 0 }"
        @mouseenter="handleMouseEnter(item)"
        @mouseleave="handleMouseLeave"
      >
        <div class="menu-item-content" @click="handleItemClick(item)">
          <component :is="item.icon" class="menu-icon" v-if="item.icon" />
          <span class="menu-text">{{ item.label }}</span>
          <icon-right class="menu-arrow" v-if="item.children && item.children.length > 0" />
        </div>
        
        <!-- 子菜单 -->
        <div
          v-if="item.children && item.children.length > 0"
          class="submenu"
          :class="{ 'show': hoveredItem === item.key }"
          @mouseenter="keepSubmenuOpen"
          @mouseleave="handleSubmenuLeave"
        >
          <div
            v-for="subItem in item.children"
            :key="subItem.key"
            class="submenu-item"
            :class="{ 'has-submenu': subItem.children && subItem.children.length > 0 }"
            @mouseenter="handleSubItemEnter(subItem)"
            @mouseleave="handleSubItemLeave"
          >
            <div class="submenu-item-content" @click="handleItemClick(subItem)">
              <component :is="subItem.icon" class="submenu-icon" v-if="subItem.icon" />
              <span class="submenu-text">{{ subItem.label }}</span>
              <icon-right class="submenu-arrow" v-if="subItem.children && subItem.children.length > 0" />
            </div>
            
            <!-- 三级菜单 -->
            <div
              v-if="subItem.children && subItem.children.length > 0"
              class="third-menu"
              :class="{ 'show': hoveredSubItem === subItem.key }"
              @mouseenter="keepThirdMenuOpen"
              @mouseleave="handleThirdMenuLeave"
            >
              <div
                v-for="thirdItem in subItem.children"
                :key="thirdItem.key"
                class="third-menu-item"
                @click="handleItemClick(thirdItem)"
              >
                <component :is="thirdItem.icon" class="third-menu-icon" v-if="thirdItem.icon" />
                <span class="third-menu-text">{{ thirdItem.label }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IconRight } from '@arco-design/web-vue/es/icon'
import { useRouter } from 'vue-router'

interface MenuItem {
  key: string
  label: string
  icon?: any
  path?: string
  children?: MenuItem[]
}

defineProps<{
  menuItems: MenuItem[]
}>()

const emit = defineEmits<{
  itemClick: [item: MenuItem]
}>()

const router = useRouter()
const hoveredItem = ref<string | null>(null)
const hoveredSubItem = ref<string | null>(null)
let hoverTimer: NodeJS.Timeout | null = null
let submenuTimer: NodeJS.Timeout | null = null

const handleMouseEnter = (item: MenuItem) => {
  if (hoverTimer) {
    clearTimeout(hoverTimer)
  }
  hoveredItem.value = item.key
  hoveredSubItem.value = null
}

const handleMouseLeave = () => {
  hoverTimer = setTimeout(() => {
    hoveredItem.value = null
    hoveredSubItem.value = null
  }, 150)
}

const keepSubmenuOpen = () => {
  if (hoverTimer) {
    clearTimeout(hoverTimer)
  }
}

const handleSubmenuLeave = () => {
  hoverTimer = setTimeout(() => {
    hoveredItem.value = null
    hoveredSubItem.value = null
  }, 150)
}

const handleSubItemEnter = (subItem: MenuItem) => {
  if (submenuTimer) {
    clearTimeout(submenuTimer)
  }
  hoveredSubItem.value = subItem.key
}

const handleSubItemLeave = () => {
  submenuTimer = setTimeout(() => {
    hoveredSubItem.value = null
  }, 150)
}

const keepThirdMenuOpen = () => {
  if (submenuTimer) {
    clearTimeout(submenuTimer)
  }
}

const handleThirdMenuLeave = () => {
  submenuTimer = setTimeout(() => {
    hoveredSubItem.value = null
  }, 150)
}

const handleItemClick = (item: MenuItem) => {
  if (item.path) {
    router.push(item.path)
  }
  emit('itemClick', item)
}
</script>

<style scoped>
.custom-menu {
  width: 100%;
  background: transparent;
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-item {
  position: relative;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.menu-item-content {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  color: #666;
  position: relative;
}

.menu-item:hover .menu-item-content {
  background: linear-gradient(45deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
  color: #4facfe;
  box-shadow: 0 2px 8px rgba(79, 172, 254, 0.15);
}

.menu-icon {
  font-size: 18px;
  margin-right: 12px;
  transition: all 0.3s ease;
}

.menu-text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.menu-arrow {
  font-size: 12px;
  transition: all 0.3s ease;
  opacity: 0.6;
}

.menu-item:hover .menu-arrow {
  opacity: 1;
  transform: translateX(2px);
  color: #4facfe;
}

/* 子菜单样式 */
.submenu {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 220px;
  max-width: 280px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(79, 172, 254, 0.2);
  padding: 8px 0;
  z-index: 2147483647;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-20px) translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.submenu.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) translateY(0);
}

.submenu-item {
  position: relative;
}

.submenu-item-content {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
  margin: 0 8px;
  border-radius: 8px;
}

.submenu-item:hover .submenu-item-content {
  background: linear-gradient(45deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
  color: #4facfe;
}

.submenu-icon {
  font-size: 16px;
  margin-right: 10px;
}

.submenu-text {
  flex: 1;
  font-size: 13px;
}

.submenu-arrow {
  font-size: 10px;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.submenu-item:hover .submenu-arrow {
  opacity: 1;
  transform: translateX(2px);
  color: #4facfe;
}

/* 三级菜单样式 */
.third-menu {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 200px;
  max-width: 260px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(79, 172, 254, 0.25);
  padding: 8px 0;
  z-index: 2147483646;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-15px) translateY(-5px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.third-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) translateY(0);
}

.third-menu-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
  margin: 0 8px;
  border-radius: 6px;
}

.third-menu-item:hover {
  background: linear-gradient(45deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
  color: #4facfe;
}

.third-menu-icon {
  font-size: 14px;
  margin-right: 8px;
}

.third-menu-text {
  font-size: 12px;
}

/* 自定义滚动条 */
.submenu::-webkit-scrollbar,
.third-menu::-webkit-scrollbar {
  width: 4px;
}

.submenu::-webkit-scrollbar-track,
.third-menu::-webkit-scrollbar-track {
  background: transparent;
}

.submenu::-webkit-scrollbar-thumb,
.third-menu::-webkit-scrollbar-thumb {
  background: rgba(79, 172, 254, 0.3);
  border-radius: 2px;
}

.submenu::-webkit-scrollbar-thumb:hover,
.third-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(79, 172, 254, 0.5);
}
</style>
